<template>
	<view class="page">
		<image src="/static/img/loading.png" class="loading" mode="widthFix"></image>
		
		<view class="bottom">
			<view class="wait">
				<image src="/static/img/wait.png"></image>
				<view class="wait-time">
					<text>{{count}}s</text>
					<text @click="skin">跳过</text>
				</view>
			</view>
			<image src="/static/img/logo.png" class="logo"></image>
			<text class="cloud">云盟商桥</text>
			<text class="slogn">不一样的购物体验，不一样的购物心情</text>
		</view>

	</view>
</template>

<script>
	export default {
		onLoad() {
			this.init();
		},
		data() {
			return {
				count: 5,
				timer: null,
				timeOut: null
			}
		},
		methods: {
			init() {
				this.timer = setInterval(()=> {
					--this.count;
				},1000);
				this.timeOut = setTimeout(()=> {
					clearInterval(this.timer);
					this.toHome();
				},5000)
			},
			toHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			skin() {
				clearInterval(this.timer);
				clearTimeout(this.timeOut);
				this.toHome();
			}
		}
	}
</script>

<style>
	.page {
		width: 100%;
		height:100vh;
	}
	.loading {
		width: 750rpx;
		height: calc(100vh - 430rpx);
		position: fixed;
		top: 0;
	}
	.wait {
		position: absolute;
		width: 64rpx;
		height: 64rpx;
		margin-left: 656rpx;
		margin-top: 30rpx;
	}
	.wait image {
		width: 64rpx;
		height: 64rpx;
	}
	.wait-time text {
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 500;
	}
	.wait-time {
		position: absolute;
		top: 3rpx;
		left: 13rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.logo {
		display: block;
		width: 124rpx;
		height: 124rpx;
		margin: 60rpx auto 0 auto;
	}
	.cloud {
		display: block;
		font-size: 42rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: rgba(254,177,71,1);
		margin-left: 293rpx;
		margin-top: 38rpx;
	}
	.slogn {
		display: block;
		text-align: center;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102,102,102,1);
		margin-top: 38rpx;
	}
	.bottom{
		width: 100%;
		height: 430rpx;
		position: fixed;
		bottom: 0;
		z-index: 1;
		background-color: #FFFFFF;
	}
</style>
